<template>
  <div class="app-container">

    <el-steps :active="3" finish-status="success" simple style="margin: 20px 0">
      <el-step title="编辑课程基本信息"></el-step>
      <el-step title="编辑课程大纲"></el-step>
      <el-step title="发布课程"></el-step>
    </el-steps>

    <el-form label-width="120px">

    <el-row>
      <el-col>
        <el-card style="padding: 30px;">
          <div style="display: inline-block">
            <img :src="course.cover" class="image" style="vertical-align: top">
            <div style="display: inline-block; margin-left: 60px;height: 300px;line-height: 50px;">
              <h1 style="color: orange;">{{course.title}}</h1>
              <div>
                共
                <el-tag type="danger" effect="dark">
                  {{ course.lessonNum }}
                </el-tag>
                课时
              </div>
              <div>
                所属分类：
                <el-tag type="danger" effect="dark">
                  {{ course.parentCourse }}
                </el-tag>
                -
                <el-tag type="danger" effect="dark">
                  {{ course.sonCourse }}
                </el-tag>
              </div>
              <div>
                课程讲师：
                <el-tag type="danger" effect="dark">
                  {{ course.name }}
                </el-tag>
              </div>
              <div>
                ￥
                <el-tag type="danger" effect="dark">
                  {{ course.price }}
                </el-tag>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

      <el-form-item style="margin-top: 30px;">
        <el-button type="primary" @click="previous" :disabled="btnStatus">上一步</el-button>
        <el-button type="primary" @click="publish" :disabled="btnStatus">发布课程</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>

  import course from '@/api/course'
  
  // 导入js-cookie
  import cookie from 'js-cookie'

  export default {
    data() {
      return {
        "btnStatus": false,
        "courseId": "",
        "course": {
          "title": "",
          "lessonNum": 0,
          "parentCourse": "",
          "sonCourse": "",
          "name": "",
          "price": 0,
          "cover": "",
          "status": ""
        }
      }
    },
    created() {
      // 获取课程id
      if(this.$route.params && this.$route.params.id) {
        this.courseId=this.$route.params.id;
        // 查询章节和小节信息
        this.selectCourseInfo(this.courseId);
      }
    },
    methods: {
      // 获取课程信息
      selectCourseInfo(courseId) {
        // 校验id
        if(!courseId) {
          this.$message.error("课程id为空");
          return ;
        }
        // 执行查询操作
        course.selectCourseInfo(courseId)
          .then(res => {
            this.course=res.data;
          }).catch(err => {
            this.$message.error(err.message);
          });
      },
      // 回退到"编辑课程大纲"
      previous() {
        this.$router.push({"path": `/course/chapter/${this.courseId}`});
      },
      // 提交课程信息
      publish() {
        // 校验id
        if(!this.courseId) {
          this.$message.error("课程id为空");
          return ;
        }
        // 执行发布操作
        course.updateStatus(this.courseId)
          .then(res => {
            this.$message({
              type: 'success',
              message: res.message,
            });
            // 清理cookie
            if(cookie.get("course")) {
              cookie.remove("course");
            }
            // 跳转课程列表页
            this.$router.push({"path": '/course/list'});
          }).catch(err => {
            this.$message.error(err.message);
          });
      }
    }
  }

</script>
